<!DOCTYPE html>
<html lang="en" class="mobile portrait">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">

	<link rel="shortcut icon" href="../favicon.ico">
	<title>松下小家电兑奖平台</title>

	<link rel="stylesheet" href="../assets/js/swiper/css/swiper.min.css">
	<link rel="stylesheet" href="../assets/css/portal.css">
	<link rel="stylesheet" href="../assets/css/portal-animate.min.css">
	<link rel="stylesheet" type="text/css" href="../assets/css/weui.min.css">
	
	<style type="text/css" media="screen">
	
		#card-prize {
			/*background-image: url(../assets/image/cards/card-prize-national.jpg);*/
			/*background-image: url(../assets/image/cards/card-prize-xmas.jpg);*/
			background-image: url(../assets/image/cards/card-prize-spring2017.jpg);
		}

		#card-selfie {
			/*background-image: url(../assets/image/cards/card-selfie.jpg);*/
			background-image: url(../assets/image/cards/card-query-xmas.jpg);
		}

		#card-query {
			/*background-image: url(../assets/image/cards/card-query-national.jpg);*/
			/*background-image: url(../assets/image/cards/card-query-xmas.jpg);*/
			background-image: url(../assets/image/cards/card-query-spring2017.jpg);
		}
		
		.section-top-right {
			position: absolute;
			color: #ffffff;
			z-index: 3;
			top: 10px;
			right: 10px;
		}
		
		.section-top-right img {
			width: 35px;
		}
		
		.on {
			content: url(../assets/image/portal/on.png);
		}
		
		.off {
			content: url(../assets/image/portal/off.png);
		}
		
		.section-content { 
			width: 100%; 
			position: absolute; 
			top: 0; 
			left: 0;
		} 
		
		.section-bottom { 
			width: 100%; 
			position: absolute; 
			bottom: 0; 
			left: 0; 
		}
		
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: "proxima-nova-soft", sans-serif;
  -webkit-user-select: none;
  overflow: hidden;
}
body .vertical-centered-box {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
}
body .vertical-centered-box:after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

* {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
body {
  /*background: #2c2d44;*/
}
#particles-background, #particles-foreground {
  left: -51%;
  top: -51%;
  width: 202%;
  height: 202%;
  -webkit-transform: scale3d(0.5, 0.5, 1);
  -moz-transform: scale3d(0.5, 0.5, 1);
  -ms-transform: scale3d(0.5, 0.5, 1);
  -o-transform: scale3d(0.5, 0.5, 1);
  transform: scale3d(0.5, 0.5, 1);
}
#particles-background {
  background: #2c2d44;
  background-image: -moz-linear-gradient(45deg, #3f3251 2%, #002025 100%);
  background-image: -webkit-linear-gradient(45deg, #3f3251 2%, #002025 100%);
  background-image: linear-gradient(45deg, #3f3251 2%, #002025 100%);
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}


.loading {
  border-radius: 50%;
  margin: 0 auto;
  margin-top: 38.2%;
  width: 60px;
  height: 60px;
  border: 0.25rem solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  -webkit-animation: spin 1s infinite linear;
          animation: spin 1s infinite linear;
}

.myloader {
	position: absolute;
	width: 100%; 
	height: 100%;
	z-index: 99;
}


	</style>
	
</head>

<body>
	<div class="myloader">
		<div id="particles-background" class="vertical-centered-box"></div>
		<div id="particles-foreground" class="vertical-centered-box"></div>

		<div class="loading"></div>

		<div class="txt-3">
			<!-- <p>松下电器</p> -->
			<p>百年传承，智美未来</p>
			<p>© Panasonic Corporation of China <script>document.write((new Date()).getFullYear());</script></p>
		</div>
	</div>
	
	<div class="section-top-right">
		<img id="music-icon" class="on">
		<audio src="../assets/music/bg-music.mp3" autoplay="0" loop='loop'></audio>
	</div>



	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<!-- 第一个 slide -->
					<img class="section-content" src="../assets/image/portal/avatar.jpg">
					<img class="section-bottom" src="../assets/image/portal/product-row.png">
					<span class="sprite_global"></span>
			</div>

			<div class="swiper-slide">
				<!-- 第二个 slide -->
				<div class="wrapper">
					<!-- 三张活动卡片 -->
					<div id="card-prize" class="card-common card-shadow swiper-lazy"></div>
					<div id="card-query" class="card-common card-shadow swiper-lazy"></div>
					<div id="card-selfie" class="card-common card-shadow swiper-lazy"></div>
					
				</div>
				
				
				<div class="weui_dialog_alert" id="iosDialog" style="display: none;">
					<div class="weui-mask"></div>
					<div class="weui-dialog" style="top:50%">
						<div class="weui-dialog__bd">很抱歉，本次活动已结束</div>
						<div class="weui-dialog__ft">
							<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
	


	<script src="../assets/js/portal/Particleground.js" type="text/javascript"></script>
	<script src="../assets/js/lottery/jquery-1.10.2.min.js" type="text/javascript"></script>
	<script src="../assets/js/swiper/js/swiper.min.min.js" type="text/javascript"></script>
	<script src="../assets/js/swiper/js/swiper.jquery.min.min.js" type="text/javascript"></script>
	<script>
	$(document).ready(function(){
		//	初始化滑屏插件
		var mySwiper = new Swiper('.swiper-container', {
			direction: 'vertical',
			loop: false,
			onSlideChangeEnd: function(mySwiper) {
				if (mySwiper.activeIndex == 1) {
					$(".myloader").remove();
				
					mySwiper.removeSlide(0);
				}
			}
		});
	
		$(".myloader").fadeOut(3000, "linear");
		$('audio').get(0).play();
	});
	
	// 设定卡片点击的跳转地址
	// var url_for_card_selfie = "/pana-may/self-activity";
	var url_for_card_prize = "/pana-campaigns/pages/campaigns/prize-cashing/2017-01-20/home.html"; 
	var url_for_card_query_xmas_2016 = "/pana-campaigns/pages/campaigns/query-xmas-2016.html";
	var url_for_card_query_spring_2017 = "/pana-campaigns/pages/campaigns/query-spring-2017.html";

	function goto(element, newLocation) {
		$(element).click(function () {
			window.location = newLocation;
			return false;
		});
	}
	
	function setOffline(element) {
		$(".weui-dialog__btn").click(function () {
			$('#iosDialog').fadeOut(200);
		});

		$(element).click(function () {
			$('#iosDialog').fadeIn(200);
		});
	}
	
	setOffline("#card-prize");
	// goto("#card-prize", url_for_card_prize);
	
	// goto("#card-selfie", url_for_card_selfie);
	goto("#card-selfie", url_for_card_query_xmas_2016);
	
	goto("#card-query", url_for_card_query_spring_2017);

	
	$("#music-icon").on('click', function() {
		if ($(this).hasClass('on')) {
			$('audio').get(0).pause();
			$(this).removeClass('on');
			$(this).addClass('off');
		} else {
			$('audio').get(0).play();
			$(this).removeClass('off');
			$(this).addClass('on');
		}
	});


	</script>

</body>

</html>
